<template>
	<div class="container">
		<div class="jx-return-container">
      <i class="iconfont icon-back" @click="back"></i><span class="cube-title">结算单详情</span>
    </div>
    <div class="jx-detail">
      <div class="detail-item">
        <div class="item_2 item">
          <div class="title">
            基本信息
          </div>
          <div class="list">
            <span>生成日期：</span>
            <div class="right">
              <span>2019-09-21</span>
            </div>
          </div>
          <div class="list">
            <span>结算单编号：</span>
            <div class="right">
              <span>33213212222</span>
            </div>
          </div>
          <div class="list">
            <span>结算方：</span>
            <div class="right">
              <span>太平洋保险公司</span>
            </div>
          </div>
          <div class="list">
            <span>结算周期：</span>
            <div class="right">
              <span>2019-09-21 09：00：01</span><span>&nbsp;&nbsp;至</span><br/>
              <span>2019-09-22 09：00：01</span>
            </div>
          </div>
        </div>
        <div class="item_2 item">
          <div class="title">结算信息</div>
          <div class="list">
            <span>结算笔数：</span>
            <div class="right">
              <span>10</span>
            </div>
          </div>
          <div class="list">
            <span>结算金额：</span>
            <div class="right">
              <span>1264.00</span>
            </div>
          </div>
          <div class="list">
            <span>结算类型：</span>
            <div class="right">
              <span>应收</span>
            </div>
          </div>
          <div class="list">
            <span>结算状态：</span>
            <div class="right">
              <span>未完成</span>
            </div>
          </div>
          <div class="list">
            <span>最后付款日：</span>
            <div class="right">
              <span>2019-09-21 09：00：01</span>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item">
          <div class="title">
            结算明细
          </div>
          <div class="jx-table" style="padding: 0;">
            <el-table :data="detail" border :span-method="objectSpanMethod" style="width: 100%" v-loading="boo.loading">
              <el-table-column type="index" label="序列" width="60" align="center">
              </el-table-column>
              <el-table-column prop="item1" label="客户类型" width="150" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item2" label="结算方" width="150" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item3" label="订单编号" width="130" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item4" label="商品名称" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item5" label="订单时间" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item6" label="当前状态" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item7" label="订单金额" align="center" :show-overflow-tooltip="true">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        boo: {
          loading: false,
          id: this.$route.query.id,
        },
        detail: [
          {item1: '三方客户',item2: '太平洋保险公司',item3: '37220132112121',item4: '【服务】 保养套餐A',item5: '2019-08-14 12:31:21',item6: '待结算',item7: '100.00'},
          {item1: '三方客户',item2: '太平洋保险公司',item3: '37220132112121',item4: '【服务】 保养套餐A',item5: '2019-08-14 12:31:21',item6: '待结算',item7: '100.00'},
          {item1: '商家',item2: '云途信息技术有限公司',item3: '37220132112121',item4: '米其林轮胎',item5: '2019-08-14 12:31:21',item6: '待结算',item7: '100.00'},

        ],
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      back(){
        history.go(-1)
      },
      getList(){
        let _self = this
      },
    },
	}

</script>
<style scoped lang="sass">
</style>
